<template>
	<view>
		<view v-if="isVisible" class="overlay"></view>
		<view :class="['picker-container', isVisible ? 'slide-up' : 'slide-down']">
			<view class="picker-actions">
				<text class="btn-cancel" @tap="cancelSelection">取消</text>
				<text class="btn-confirm" @tap="confirmSelection">确定</text>
			</view>
			<picker-view class="picker-view" :value="pickerValue" @change="handlePickerChange">
				<picker-view-column>
					<view v-for="(province, index) in provinces" :key="index" class="picker-item">{{ province }}</view>
				</picker-view-column>
				<picker-view-column>
					<view v-for="(city, index) in cities" :key="index" class="picker-item">{{ city }}</view>
				</picker-view-column>
				<picker-view-column>
					<view v-for="(area, index) in areas" :key="index" class="picker-item">{{ area }}</view>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</template>

<script>
	import AreaData from "./area.js";

	export default {
		data() {
			return {
				provinces: [],
				cities: [],
				areas: [],
				pickerValue: [0, 0, 0],
				isVisible: false
			};
		},
		props: {
			province: { type: String, default: '' },
			city: { type: String, default: '' },
			area: { type: String, default: '' },
			show: { type: Boolean, default: false }
		},
		watch: {
			province: 'initializePicker',
			city: 'initializePicker',
			area: 'initializePicker',
			show(newVal) {
				this.isVisible = newVal;
			}
		},
		mounted() {
			this.loadProvinces();
			this.initializePicker();
		},
		methods: {
			loadProvinces() {
				this.provinces = AreaData.map(province => province.name);
			},
			loadCities(provinceIndex) {
				this.cities = AreaData[provinceIndex]?.city.map(city => city.name) || [];
			},
			loadAreas(provinceIndex, cityIndex) {
				this.areas = AreaData[provinceIndex]?.city[cityIndex]?.area.map(area => area.name) || [];
			},
			initializePicker() {
				const provinceIndex = this.provinces.indexOf(this.province);
				this.loadCities(provinceIndex);
				const cityIndex = this.cities.indexOf(this.city);
				this.loadAreas(provinceIndex, cityIndex);
				const areaIndex = this.areas.indexOf(this.area);
				this.pickerValue = [provinceIndex, cityIndex, areaIndex];
			},
			handlePickerChange(e) {
				const [provinceIndex, cityIndex, areaIndex] = e.detail.value;
				this.loadCities(provinceIndex);
				this.loadAreas(provinceIndex, cityIndex);
				this.pickerValue = [provinceIndex, cityIndex, areaIndex];
				const selectedProvince = this.provinces[provinceIndex];
				const selectedCity = this.cities[cityIndex];
				const selectedArea = this.areas[areaIndex];
				const areaCode = AreaData[provinceIndex]?.city[cityIndex]?.area[areaIndex]?.id || '';
				this.$emit('updateSelection', { province: selectedProvince, city: selectedCity, area: selectedArea, areaCode });
			},
			confirmSelection() {
				this.$emit('confirm', {
					province: this.provinces[this.pickerValue[0]],
					city: this.cities[this.pickerValue[1]],
					area: this.areas[this.pickerValue[2]]
				});
				this.isVisible = false;
			},
			cancelSelection() {
				this.$emit('cancel');
				this.isVisible = false;
			}
		}
	};
</script>

<style scoped>
	.overlay {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.6);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
	}

	.picker-container {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		transition: all 0.3s;
		z-index: 11;
	}

	.picker-view {
		height: 250px;
		width: 100%;
	}

	.picker-item {
		text-align: center;
		font-size: 16px;
	}

	.picker-actions {
		display: flex;
		justify-content: space-between;
		padding: 10px 20px;
		border-bottom: 1px solid #eee;
		background-color: #f8f8f8;
	}

	.btn-cancel,
	.btn-confirm {
		font-size: 16px;
		color: #007aff;
		cursor: pointer;
	}

	.slide-up {
		bottom: 0;
	}

	.slide-down {
		bottom: -300px;
	}
</style>
